<template>
  <!-- 产品品质主页 -->
  <div class="root">

    <!-- tabs 可用about中tabs组件 -->
    <div class="productQualityPc">
      <img class="banner" :src="banner?.[0]?.webimages?.[0]" />
      <div class="product-box">
        <div class="menu-box" v-if="this.$router.currentRoute.value.name != 'productFrist'">
          <div :class="this.$router.currentRoute.value.name == this.menu?.[0]?.rote ? 'quality-selected' : 'quality'"
            @click="menuClick(menu?.[0]?.rote)">
            <div class="name">{{ menu?.[0]?.name }}</div>
            <div class="en">{{ menu?.[0]?.nickname }}</div>
            <div class="line"></div>
          </div>
          <el-divider class="divider" direction="vertical"></el-divider>
          <div :class="this.$router.currentRoute.value.name == this.menu?.[1]?.rote ? 'quality-selected' : 'quality'"
            @click="menuClick(menu?.[1]?.rote)">
            <div class="name">{{ menu?.[1]?.name }}</div>
            <div class="en">{{ menu?.[1]?.nickname }}</div>
            <div class="line"></div>
          </div>
        </div>

      </div>

    </div>
    <div class="productQualityM">
      <img class="banner" :src="banner?.[0]?.mobileimages?.[0]" />
      <div class="product-box">
        <div class="menu-box" v-if="this.$router.currentRoute.value.name != 'productFrist'">
          <div :class="this.$router.currentRoute.value.name == this.menu?.[0]?.rote ? 'quality-selected' : 'quality'"
            @click="menuClick(menu?.[0]?.rote)">
            <div class="name">{{ menu?.[0]?.name }}</div>

            <div class="line"></div>
          </div>
          <el-divider class="divider" direction="vertical"></el-divider>
          <div :class="this.$router.currentRoute.value.name == this.menu?.[1]?.rote ? 'quality-selected' : 'quality'"
            @click="menuClick(menu?.[1]?.rote)">
            <div class="name">{{ menu?.[1]?.name }}</div>

            <div class="line"></div>
          </div>
        </div>

      </div>

    </div>
    <router-view />
  </div>

</template>

<script>

export default {
components: {},
data() {
return {

menu: [],

banner: [],
};
},

computed: {},
created() { },
mounted() {
//获取本地菜单
// this.menu = this.$utils.getNavChild("productQualityIndex");
this.menu.push(this.$utils.getNavClass('productQuality'));
this.menu.push(this.$utils.getNavClass('productMannage'));
this.getBanner();


},
methods: {

async getBanner() {
try {

//轮播图
const banner = await this.$request.get("/khcommon/banner", {
params: {
navId: this.$utils.getNavId("productQualityIndex")
}
});
this.banner = banner.data;

} catch (e) {
// 错误状态
this.$message.error(e.message);
}
},
menuClick(rote) {

this.$router.push({
name: rote,
});
}
}
};
</script>
<style lang="scss" scoped>
.root {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
}

.productQualityM {
  display: none;
}

.productQualityPc {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;

  .banner {
    width: 1920px;
    height: 375px;
    object-fit: cover;



  }

  .product-box {
    width: 1920px;

    .menu-box {
      cursor: pointer;
      background: #fff;
      width: 100%;
      height: 96px;
      display: flex;
      justify-content: center;

      .divider {
        margin-top: 23px;
        height: 50px;
      }

      .quality {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 96px;

        &:hover {
          .name {
            font-size: 22px;
            color: color.$base;
            font-weight: bold;

          }

          .line {
            position: absolute;
            bottom: 0px;
            background: color.$base;
            width: 600px;
            height: 3px;
          }


          .en {
            font-size: 18px;
            margin-top: 4px;
            color: color.$base;
            font-weight: 500;
            opacity: 0.5;

          }
        }

        .line {
          position: absolute;
          bottom: 0px;

          width: 600px;
          height: 3px;
        }

        .name {
          font-size: 22px;
          color: #666;
          font-weight: bold;

        }

        .en {
          font-size: 18px;
          margin-top: 4px;
          color: #333;
          font-weight: 500;
          opacity: 0.5;
        }
      }
    }
  }


  .quality-selected {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 96px;


    .name {
      font-size: 22px;
      color: color.$base;
      font-weight: bold;

    }

    .line {
      position: absolute;
      bottom: 0px;
      background: color.$base;
      width: 600px;
      height: 3px;
    }


    .en {
      font-size: 18px;
      margin-top: 4px;
      color: color.$base;
      font-weight: 500;
      opacity: 0.5;

    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .productQualityPc {
    display: none;
  }

  .productQualityM {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;

    .banner {
      width: fn.rpx(750);
      height: fn.rpx(665);
    }

    .quality {

      display: flex;
      flex-direction: column;
      align-items: center;

      .html {
        width: fn.rpx(750);
      }
    }


    .menu-box {
      cursor: pointer;
      background: #fff;
      width: 100%;
      height: fn.rpx(96);
      display: flex;
      justify-content: center;

      .divider {
        margin-top: fn.rpx(23);
        height: fn.rpx(50);
      }

      .quality {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: fn.rpx(375);
        height: fn.rpx(96);

        .line {
          position: absolute;
          bottom: 0px;

          width: fn.rpx(375);
          height: fn.rpx(3);
        }

        .name {
          font-size: fn.rpx(22);
          color: #666;
          font-weight: bold;

        }

        .en {
          font-size: fn.rpx(18);
          margin-top: fn.rpx(4);
          color: #333;
          font-weight: 500;
          opacity: 0.5;
        }
      }
    }

    .quality-selected {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: fn.rpx(375);
      height: fn.rpx(96);


      .name {
        font-size: fn.rpx(22);
        color: color.$base;
        font-weight: bold;

      }

      .line {
        position: absolute;
        bottom: 0px;
        background: color.$base;
        width: fn.rpx(375);
        height: fn.rpx(3);
      }


      .en {
        font-size: fn.rpx(18);
        margin-top: fn.rpx(4);
        color: color.$base;
        font-weight: 500;
        opacity: 0.5;
      }
    }

  }
}
</style>